<template>
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        :default-sort="{ prop: 'date', order: 'ascending' }"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >

        <el-table-column align="center" prop="date" label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.uid }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100px" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50%;">
          </template>
        </el-table-column>

        <el-table-column width="105px" align="center" label="用户名">
          <template slot-scope="scope">
            <span v-text="scope.row.username"></span>
          </template>
        </el-table-column>

        <el-table-column width="120px" align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="密码">
          <template slot-scope="scope">
            <span>{{ scope.row.password }}</span>
          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="邮箱">
          <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="电话">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="权限">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column width="300px" align="center" label="背景图">
          <template slot-scope="scope">
            <img :src="scope.row.backgroundImage" style="width: 250px;height: 150px;border-radius: 10%;">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">

              <el-button @click="changescore(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                修改
              </el-button>

            <el-button
              style="margin-left: 10px"
              type="danger"
              size="mini"
              icon="el-icon-edit"
              @click="deleteUser(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        :total="total"
        @pagination="getList"
      />

      <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
          <el-form :model="editForm" :rules="rules" ref="editForm" >
            <el-form-item label="用户名" prop="username">
              <el-input :disabled="true" v-model="editForm.username"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input  v-model="editForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input  v-model="editForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input  v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input  v-model="editForm.phone"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser('editForm')">确 定</el-button>
          </div>
      </el-dialog>
    </div>
  </template>

  <script>
  import { GetAllSquareUser, DelectSquareById, ChangeSquareById } from '@/api/square'
  import {  deleteUserByUid, ChangeUser,queryUserPage}  from '@/api/user'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'UserManager',
    components: { Pagination },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        contentid: '',
        content:"",
        dialogFormVisible: false,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 8
        },
        editForm:{},
        rules: {
          nickname: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      this.getList()
    },

    methods: {
      getStyles() {

        //生成随机颜色
        let max = 8;
        let min = 1;

        let x = Math.floor(Math.random() * (max - min + 1)) + min;

        const backcolor = "randomColor" + x;

        if (backcolor == "randomColor1") {
          return "background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);"
        }
        if (backcolor == "randomColor2") {
          return "background-image: linear-gradient( 135deg, #FEB692 10%, #EA5455 100%);"
        }
        if (backcolor == "randomColor3") {
          return "background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);"
        }
        if (backcolor == "randomColor4") {
          return "background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);"
        }
        if (backcolor == "randomColor5") {
          return "background-image: linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%);"
        }
        if (backcolor == "randomColor6") {
          return "background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);"
        }
        if (backcolor == "randomColor7") {
          return "background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);"
        }
        if (backcolor == "randomColor8") {
          return "background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);"
        }


        return "background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);"
      },

      changescore(user){
        this.dialogFormVisible = true;
        this.editForm = user
      },

      deleteUser(id) {

        this.$confirm('此操作将永久删除是否确认删除？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonClass: "danger",
          confirmButtonText: '删除',
          cancelButtonText: '放弃删除'
        }).then(() => {
            deleteUserByUid(id).then(resp => {
              if(resp.code===200){
                this.$notify({
                  title: '成功',
                  message: '您已成功删除该用户',
                  type: 'success'
                });
                //刷新当前页面
                this.getList()
              }else{
                this.$notify({
                  title: '失败',
                  message: resp.message,
                  type: 'error'
                });
              }
            })
          })
      },
      getList() {
        this.listLoading = true
        queryUserPage(this.listQuery.page,this.listQuery.limit).then(resp => {
          console.log(resp)
          this.list = resp.data.records
          console.log(this.list)
          this.total = resp.data.total
          this.listLoading = false
        })
      },
      editUser(form){
        this.$refs[form].validate((valid)=>{
          if(valid){
            ChangeUser(this.editForm).then(resp => {
              if(resp.code===200){
                this.$notify({
                  title: '成功',
                  message: '您已成功修改该用户',
                  type: 'success'
                });
                //刷新当前页面
                this.getList()
              }else{
                this.$notify({
                  title: '失败',
                  message: resp.message,
                  type: 'error'
                });
              }
            })
          }
          this.dialogFormVisible = false
        })
      },
      }

    }
  </script>

  <style scoped>
  .el-button:nth-child(1) {

  }
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  .post-item__preview {
    width: 200px;
    height: 120px;
    border-radius: 10px;
    background-size: cover;
    background-position: 50%;
  }
  .delay-0 {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-fill-mode: backwards !important;
    animation-fill-mode: backwards !important;
  }
  .text-center {
    text-align: center !important;
  }
  .flex {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* flex样式呈现*/
    display: flex;
    /*垂直排列*/
    flex-direction: column;
    align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
    justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
  }
  .flex {
    flex: 1;
  }
  .text-white {
    color: #fff !important;
  }
  .opacity-50 {
    opacity: 0.5 !important;
  }
  </style>
